<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>预警事件</title>
		<link rel="icon" href="static/img/favicon.ico" type="image/x-icon">
		<link href="css/common.css" rel="stylesheet" type="text/css" />
		<link href="css/normolize.css" rel="stylesheet" type="text/css" />
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<!--[if IE 9]> <link href="css/ieHack9.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if IE 8]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /><link href="css/ieHack8.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<!--[if lte IE 7]> <link href="css/ieHack.css" rel="stylesheet" type="text/css" /> <![endif]-->
		<style>
			.w18 {
				width: 180px;
				padding-right: 20px;
			}
		</style>

	</head>

	<body>
		<script src="js/tpl/header.js" type="text/javascript" charset="utf-8"></script>
		<div class="page-wrapper productlist minwidth border" id="page-wrapper">
			<div class="line"></div>
			<script src="js/tpl/warningMenu.js" type="text/javascript" charset="utf-8"></script>
			<div class="vertival-line"></div>
			<div class="page-content">
				<div class="tablist">
					<ul>
						<li class="tabItem active">
							<a href="#">预警事件</a>
						</li>
						<li class="tabItem ">
							<a href="#">预警策略</a>
						</li>
						<li class="tabItem ">
							<a href="#">预警人员</a>
						</li>
						<li class="tabItem ">
							<a href="#">预警日志</a>
						</li>
					</ul>
				</div>

				<div class="page-container">
					<div class="page-form">
						<div>
							<span class="btn disabled fl group groupStart">批量启用</span>
							<span class="btn disabled fl group groupStop" style="margin-left:20px;">批量停用</span>
							<span class="btn blue addPro  fr" onclick="add()"><i class="icon icon_add blue"></i> 添加事件</span>
						</div>
						<div class="clearfix"></div>
						<div class="form">
							<form class="inline-form">
								<div>
									<label>事件名称：</label>
									<input type="text" placeholder="请输入事件名称" style="width:150px;" name="eventname" />
								</div>
								<div>
									<label style="line-height: 26px;">状态：</label>
									<div class="overlay">
										<!--这个是用来存放选中的select的值的-->
										<input type="hidden" value="" class="form-select-value" name="status" />
										<div class="dropdown">
											<button class="dropdown-toggle form-dropdown" type="button">
				                                <span class="value" data-default="全部" >全部</span>
				                                <span class="caret"></span>
				                            </button>
											<ul class="none">
												<li data-value=''>全部</li>
												<li data-value='1'>启用</li>
												<li data-value='2'>停用</li>
											</ul>
										</div>
									</div>
								</div>
								<div>
									<label>添加时间：</label>
									<input type="text" name="starttime" class="Wdate" onclick="WdatePicker()" />--<input type="text" name="endtime" class="Wdate" onclick="WdatePicker()" />
								</div>
								<input type="hidden" id="pageNo" value="1" />
								<input type="button" value="搜索" class="search-input-button" onclick="searchForm()" />
								<input type="button" value="重置" onclick="resetForm()" class="search-input-button bgblue" style="margin-right: 0px;" />

							</form>
						</div>
					</div>
					<div class="table">
						<div class="tablelist">
							<table>
								<thead>
									<tr>
										<th class="colspan" style="width:80px;">
											<div class="checkbox inline-block">
												<input type="checkbox" value="" class="label-input" id="checkAll" />
												<label for="checkAll" class="input-label"></label>
											</div>
											全选
										</th>
										<th class="w18">事件名称</th>
										<th class="w18">事件对象</th>
										<th class="w18">添加时间</th>
										<th class="w18">操作</th>
									</tr>
								</thead>
								<tbody id="itemContainer">

								</tbody>
							</table>
						</div>

						<div class="pagelist fr">
							<div class=" pagedesc fl">当前<span class="currentPage"></span>/<span class="totalpage"></span>，每页<span class="perpage"></span>条，共<span class="totalnumber"></span>条</div>
							<div class="pagination inline-block fl"></div>
							<div class="inline-block fl">
								到第<input type="text" value="" class="gotopage" />页 <input type="button" value="跳转" class="search-input-button border-radius bgblue gotopage_button"></span>
							</div>

						</div>

					</div>

				</div>

			</div>
		</div>

		<div class="footer">
			<div class="footercontainer">
				<ul>
					<li>
						<a href="#">关于我们</a>
					</li>
					<li>
						<a href="#">服务与支持</a>
					</li>
					<li>
						<a href="#">常见问题</a>
					</li>
					<li>
						<a href="#">人才招聘</a>
					</li>
					<li>
						<a href="#">加盟合作</a>
					</li>
				</ul>

				<div style="margin-top:13px;">版权所有@ 2015 - 2016 深圳在乎传媒科技有限公司 粤ICP备15107022-1号</div>
			</div>

		</div>

		<!--这里是删除产品的弹框（无法删除）-->

	</body>

	<script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/page/jPages.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/page/pageFun.js" type="text/javascript" charset="utf-8"></script>

	<script src="js/wdatePicker/WdatePicker.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/layFun.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/scroll/jquery.slimscroll.min.js" type="text/javascript" charset="utf-8"></script>

	<script>
		var checkedLen, id;
		var params = {
			'eventname': '',
			'status': '',
			'starttime': '',
			'endtime': '',
		};
		listInit.url = "json/warningEventList.json";
		listInit.pageParams.perPage = 2;
		listInit.pageParams.totalNumber = 10;
		listInit.pageInit();
		listInit.pageCallback = formData;
		listInit.ajaxgGetDataHtml(params, listInit.pageCallback);
		$(function() {
			selectObj.showChangeValue();
			ccfun();
			 
		})

		function add() {
			operateEvent();
		}

		function edit(id) {
			var editObj = {
				'name': '556666',
				'selectedIds': [2, 3],
			}
			operateEvent(editObj);
		}

		//添加或者删除事件的处理函数
		function operateEvent(aa) {
			var editObj = aa ? aa : '';
			var html = '<div class="form addEventForm" style="padding:30px 20px;"><form class="block-form" id="pda">  <div style="margin-top:0px;"> <label class="inline-block">事件名称：</label> <input type="text" class="form-control" placeholder="请输入事件名称" name="newEventName" style="width: 200px;"> </div> <div> <label class="inline-block">事件对象：</label> <div style="margin-left: -14px;" class="checkbox inline-block" data-id="1" style="position:relative;z-index:10;"> <input type="checkbox" style="width:auto;" value="1" class="label-input" name="newEventObj"  id="checkbox_layer_1" /> <label for="checkbox_layer_1" class="input-label"></label> </div>平台  <div class="checkbox inline-block" data-id="2" style="position:relative;z-index:10;"> <input type="checkbox" name="newEventObj" style="width:auto;" value="2" class="label-input" id="checkbox_layer_2" /> <label for="checkbox_layer_2" class="input-label"></label> </div>酒厂  <div class="checkbox inline-block" data-id="3" style="position:relative;z-index:10;"> <input type="checkbox" name="newEventObj" style="width:auto;" value="3" class="label-input" id="checkbox_layer_3" /> <label for="checkbox_layer_3" class="input-label"></label> </div>瓶盖厂    </div>   <div style="margin-top:40px;"> <label style="width: 70px;display: inline-block;"></label> <input type="button" value="保存" class="search-input-button border-radius bgblue" id="subButton"/> <input type="button" value="返回" class="search-input-button border-radius " id="backButton" /> </div> </form></div>';
			layObj.content(400, 300, '添加事件', html, '', function() {
				addEvent(editObj, '')
			});
		}

		//添加事件
		function addEvent(editObj, url) {
			if(editObj) {
				$("input[name='newEventName']").val(editObj.name);
				for(var i = 0; i < editObj.selectedIds.length; i++) {
					var temp = editObj.selectedIds[i];
					console.log($('#checkbox_layer_' + temp));
					$('#checkbox_layer_' + temp)[0].checked = true;
					$('#checkbox_layer_' + temp).parent().addClass("checked_checkbox");
				}
			}

			checkBoxFun('', '.addEventForm input:checkbox');
			$("#subButton").click(function() {
				var loading = layer.load(0, {
					'shade': [0.5, '#fff']
				});
				var ename = $("input[name='newEventName']").val();
				var eobjs = [];
				$('.addEventForm input:checkbox').each(function() {
					if($(this)[0].checked) {
						eobjs.push($(this).parent().attr('data-id'));
					}
				})
				var errorcount = 0;
				$('.error').remove();
				if(!ename) {
					errorcount++;
					$("input[name='newEventName']").after('<div style="margin-left: 61px;" class="error"><i class=\" icon icon_error_red \"></i>请填写事件名称</div>');
				}
				if(eobjs.length == 0) {
					errorcount++;
					$("input[name='newEventObj']").eq(0).parent().parent().after('<div style="margin-left: 61px;margin-top:0px;" class="error"><i class=\" icon icon_error_red \"></i>请选择事件对象</div>');
				}
				if(errorcount > 0) {
					layer.close(loading);
					return false;
				}

				var params = {
					ename: ename,
					eobjs: eobjs,
				}

				//这里还需要判断是添加还是删除
				/*$.ajax({
					url: url,
					dataType: "JSON",
					type: "GET",
					data: params,
					cache: false,
					success: function(data) {
						 layer.close(loading);
						 layer.closeAll();
					},
					error: function() {
						layer.close(loading);layer.msg('添加失败，请稍后再试！');
					}
				})*/
				window.location.reload();
			})
			$("#backButton").click(function() {
				layer.closeAll();
			})
		}

		/*--------添加和编辑事件END---------*/

		function searchForm() {
			params.eventname = $('input[name=eventname]').val();
			params.status = $('input[name=status]').val();
			params.starttime = $('input[name=starttime]').val();
			params.endtime = $('input[name=endtime]').val();
			listInit.searchForm(params);
		}
		//复选框事件
		function ccfun() { 
			var checkAllobj = $("thead .checkbox input:checkbox");
			var checklistObj = $("tbody .checkbox input:checkbox");
			checkBoxFun(checkAllobj, checklistObj);
			//点击checkbox之后显示批量按钮
			$('.tablelist input:checkbox').click(function() {
				checkedLen = $('.checkbox.checked_checkbox').length;
				if(checkedLen > 0) {
					$('.group').removeClass('disabled');
					bindclickFun();
				} else {
					$('.group').addClass('disabled');
					unbindFun();
				}
			})
		}

		function start(obj, id,msg) {
			var yesFun = {
				msg: '确定',
				callback: function(layeo, index) {
					startAstopFun(1, id);
					$(obj).replaceWith('<span class="stopuse hover" onclick="stop(this,' + id + ',\''+msg+'\')"><i class="icon icon_stopuse blue"></i> <span>停用</span></span>');
				}
			};
			var noFun = {
				msg: '取消',
				callback: function(layeo, index) {
					layer.close(index);
				}
			};
			layObj.confirm('确定启用事件\"'+msg+'\"?', '启用事件', 400, 180, 'confirmclass', yesFun, noFun)
		}

		function stop(obj, id,msg) {
			var yesFun = {
				msg: '确定',
				callback: function(layeo, index) {
					startAstopFun(-1, id);
					$(obj).replaceWith('<span class="stopuse hover" onclick="start(this,' + id + ',\''+msg+'\')"><i class="icon icon_stratuse blue"></i> <span>启用</span></span>');
				}
			};
			var noFun = {
				msg: '取消',
				callback: function(layeo, index) {
					layer.close(index);
				}
			};
			layObj.confirm('确定停用\"'+msg+'\"?', '停用事件', 400, 180, 'confirmclass', yesFun, noFun)

		}

		function checkfunction(flag) {
			var aamsg = flag == 1 ? '确定批量启用事件么' : '确定批量停用事件么';
			if(checkedLen > 0) {
				var yesFun = {
					msg: '确定',
					callback: function(layeo, index) {
						var ids = []; //这里是获取批量操作的id数组
						$('#itemContainer .checkbox.checked_checkbox').each(function() {
							ids.push($(this).attr('data-id'));
						})
						console.log(ids);
						$('.tablelist input:checkbox').each(function() {
							$(this)[0].checked = false;
						});
						$('.checkbox').removeClass("checked_checkbox");
						unbindFun();
						$('.group').addClass('disabled');

						for(var i = 0; i < ids.length; i++) {
							startAstopFun(flag, ids[i]);
						}
						window.location.reload();
					}
				};
				var noFun = {
					msg: '取消',
					callback: function(layeo, index) {
						layer.close(index);
					}
				};
				layObj.confirm(aamsg, '提示', 400, 180, 'confirmclass', yesFun, noFun)
			}
		}

		function startAstopFun(flag, id) {
			/*$.ajax({
				url: '',
				dataType: "JSON",
				type: "GET",
				data: {},
				cache: false,
				success: function(data) {
					if(flag==1){
						alert('qiyong');
					}else{
						alert('tingyong');
					}
				},
				error: function() {
					layer.msg('请稍后再试');
				}
			})*/
		}

		function bindclickFun() {
			$('.groupStart').bind('click', function() {
				checkfunction(1)
			});
			$('.groupStop').bind('click', function() {
				checkfunction(-1)
			});
		}

		function unbindFun() {
			$('.groupStart').unbind('click');
			$('.groupStop').unbind('click');
		}

		function formData(data) {
			var html = '';
			for(var i = 0; i < data.length; i++) {
				var temp = data[i];
				html += '<tr> <td class="colspan" style="width:80px;"> <div class="checkbox inline-block" data-id="' + temp.id + '" style="position:relative;z-index:10;"> <input type="checkbox" value="" class="label-input" id="checkbox_' + temp.id + '" /> <label for="checkbox_' + temp.id + '" class="input-label"></label> </div> </td> <td class="w18"> <div class="text-ellipsis w18" > ' + temp.name + ' </div> </td> <td class="w18"> <div class="text-ellipsis w18" > ' + temp.obj + ' </div> </td> <td class="w18"> ' + temp.time + ' </td> <td> <div class="text-left  inline-block" >';
				if(temp.status == 1) {
					html += '<span class="stopuse hover"  onclick="stop(this,' + temp.id + ',\'' + temp.name + '\')"><i class="icon icon_stopuse blue"></i> <span>停用</span></span>';
				} else {
					html += '<span class="stopuse hover"  onclick="start(this,' + temp.id + ',\'' + temp.name + '\')"><i class="icon icon_startuse blue"></i> <span>启用</span></span>';
				}
				html += '<span class="tabletop hover check" onclick="edit(' + temp.id + ')" style="padding-left:20px;"><i class="icon icon_edit blue"></i> <span>编辑</span></span> </div> </td> </tr>';
			}
			return html;
		}
	</script>

</html>